<template>
  <div class="article" ref="articleRef">
    <!-- 头部区域 -->
    <van-sticky ref="stickyRef">
      <header-composition :titleSlide="0">
        <template #centerOption>
          <tabs @handleChangeCurrentTab="handleChange" :tabs="tabsList"></tabs>
        </template>
      </header-composition>
    </van-sticky>


    <!-- 内容区域 -->
    <div v-if="currentTab==0">
      <div v-for="item in data.article">
        {{item}}
<!--        <p v-if="'text' == item.type" :style="item.style" v-text="item.value"></p>-->
<!--        <img v-if="item.type == 'img'" :style="item.style" v-for="pic in item" :src="pic">-->
      </div>
    </div>
    <div class="originPage" v-else-if="currentTab==1">
       <iframe :src="data.article.targetUrl" id="qt" frameborder="0" style="width: 100%;height: 100vh;"></iframe>
    </div>
    <div v-else-if="currentTab==2">
<!--      <iframe src="https://juejin.cn/post/7206292770276163640?" id="qt" frameborder="0" style="width: 100%;height: 100vh;"></iframe>-->
<!--      <iframe src="https://zhuanlan.zhihu.com/p/395378457?utm_id=0" id="qt" frameborder="0" style="width: 100%;height: 100vh;"></iframe>-->
      <object :data="data.article.targetUrl" type="text/html" style="width: 100%;height: 100vh;">
        <embed :src="data.article.targetUrl"  />
      </object>

    </div>
  </div>
</template>

<script setup>
// 作者：YCH
// 时间：2022年11月06日 22:06:42
import HeaderComposition from "@/components/header/index.vue";
import Tabs from '@/components/tabs/tabs.vue'
import {onMounted, reactive, ref} from "vue";
import {useRoute} from 'vue-router'
import {useScrollWatch, useScrollWatch2} from "@/hooks/userScrollWatch.js";
import {listArticle, queryArticleById} from "@/api/app/app.js";
// import "@/assets/css/wechat.css"

const route = useRoute()

const currentTab = ref(0);
const tabsList = [{title: '文章'}, {title: '原网页'}, {title: "快照"}];

const handleChange = (val) => {
  currentTab.value = val;
}

const data = new reactive({
  article: {}
})

/** 获取文章*/
const getArticle = (id)=>{
  queryArticleById(id).then(response => {
    console.log(response.data)
    data.article = response.data
  });
}

onMounted(() =>{
  getArticle(route.params.id)

})

/** 标题动画相关的操作 */
// const articleRef = ref();
// const stickyRef = ref();
// let titleSlide = useScrollWatch(articleRef)
// useScrollWatch2(titleSlide, stickyRef)
</script>

<!--<style src="../../assets/css/wechat.css" scoped></style>-->

<style lang="less" scoped>
.article {
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  scroll-behavior: smooth;
  overscroll-behavior: contain; //必须加这个，不然会带动整个屏幕滚动，如果整屏幕也有滚动的话
  .rich_media_inner {
    line-height: 1.6;
    letter-spacing: .034em;
  }

  .originPage {
    //overflow: auto;
    //-webkit-overflow-scrolling: touch; // 兼容 ios
    //position: relative;
    //overflow-y: scroll;
    //-webkit-overflow-scrolling: touch;
  }

}

.article::-webkit-scrollbar {
  display: none; /*隐藏滚动条*/
}
</style>
